<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <button @click="handle">销毁</button>
        <xxx></xxx>
        <zzz></zzz>
    </div>
    <script src="./js/vue.js"></script>
    <script>
    let hub = new Vue()
    Vue.component('xxx',{
        data:()=> {
            return {
                num:0
            }
        },
        methods:{
            handle1(){
                hub.$emit('has-b',2)
        }
          },
        mounted(){
            hub.$on('has-x',(val) => {
                this.num += val
            })
        }
        ,
        template:`  
                    <div>
                        <div>b:{{num}}</div>
                        <button @click="handle1">添加1</button>
                    </div>
                   
                    `
    })
    Vue.component('zzz',{
        data:()=> {
            return {
                num:0
            }
        },
        methods:{
            handle(){
                hub.$emit('has-x',1)
        }
          },
        mounted(){
            hub.$on('has-b',(val) => {
                this.num += val
            })
        }
        ,
        template:`  
                    <div>
                        <div>x:{{num}}</div>
                        <button @click="handle">添加2</button>
                    </div>
                   
                    `
    })
    const ve = new Vue({
        el:'#app',
        data:{

        },
        methods:{
            handle(){
                hub.$off('has-x')
                hub.$off('has-b')
            }
        }
        
    })
    </script>
   
</body>
</html>